import 'package:demo_app_video/commons/http/http.dart';
import 'package:demo_app_video/commons/router/routes.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:cached_network_image/cached_network_image.dart';
class VideosPage extends StatefulWidget {
  const VideosPage({Key? key}) : super(key: key);

  @override
  State<VideosPage> createState() => _VideosPageState();
}

class _VideosPageState extends State<VideosPage> {
  var video_cate_index = '';
  List cates = [];
  List videos = [];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    initData();
  }

  initData() async{
    await get_cates();
    await get_videos();
  }


  get_cates() async {
      var resultData = await HttpUtil.getInstance().get('shortplay/category');

      if(resultData['code'] == 1){
        cates = resultData['data'];
        cates[0]['id'] = '11111111111';
        video_cate_index = cates[0]['id'];
      }
      setState(() {});
  }

  //获取短剧列表
  get_videos() async{
    var resultData = await HttpUtil.getInstance().get('shortplay/list',data: {
        'page':1,
        'cid':video_cate_index
      });
      print(resultData['data']);
      print('${video_cate_index}');
      if(resultData['code'] == 1){
        videos = resultData['data']['data'];
      }
      setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffFFFFFF),
      body: Stack(
        children: [
          Container(
              width: double.infinity,
              height: double.infinity,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage('images/personal_bg.png'),
                      fit: BoxFit.fill))),
          Container(
            width: 750.w,
            child: SingleChildScrollView(
              padding: EdgeInsets.only(
                  top: MediaQuery.of(context).padding.top + 10.h,bottom: 40.h),
              child: Column(
                children: [
                  GestureDetector(
                    child: Container(
                    width: 328.w,
                    height: 40.h,
                    decoration: BoxDecoration(
                        color: Color(0xffFFFFFF),
                        borderRadius: BorderRadius.circular(24.sp)),
                    padding: EdgeInsets.only(left: 12.w, right: 12.w),
                    child: Row(
                      children: [
                        Text(
                          '恭喜发财',
                          style: TextStyle(
                              color: Color(0xff999999), fontSize: 14.sp),
                        ),
                        Expanded(child: Container()),
                        Image.asset(
                          'images/search_icon.png',
                          width: 20.w,
                        ),
                      ],
                    ),
                  ),
                  onTap: (){
                  // asdsadasdasdas
                  Routes.navigateTo(context,Routes.search);
                  },
                  ),

                  Container(
                    margin: EdgeInsets.only(top: 10.h),
                    child: SingleChildScrollView(
                      padding: EdgeInsets.only(left: 20.w),
                      scrollDirection: Axis.horizontal,
                      child: Row(
                          children: cates
                              .map((item) => InkWell(
                                child: Container(
                                    margin: EdgeInsets.only(right: 8.w),
                                    padding: EdgeInsets.only(
                                        top: 5.h,
                                        bottom: 5.h,
                                        left: 15.w,
                                        right: 15.w),
                                    decoration: BoxDecoration(
                                        color: video_cate_index == item['id'].toString()
                                            ? Color(0xffFED3BB)
                                            : Color(0xffFFFFFF),
                                        borderRadius:
                                            BorderRadius.circular(32.sp)),
                                    child: Text(
                                      "${item['tag_name']}",
                                      style: TextStyle(
                                          color: video_cate_index == item['id'].toString()
                                              ? Color(0xffFF0000)
                                              : Color(0xff333333),
                                          fontSize: 12.sp),
                                    ),
                                  ),
                                  onTap: () async{
                                    if(video_cate_index != item['id'].toString()){
                                      video_cate_index = item['id'].toString();


                                      setState(() {});
                                      await get_videos();

                                    }
                                  },
                              ))
                              .toList()),
                    ),
                  ),
                  Container(height: 12.h,),
                  //列表
                  Container(
                    width: 328.w,
                    child: Wrap(
                      runSpacing: 16.h,
                      spacing: 8.w,
                      children: videos.map((item)=>Container(
                          width: 104.w,
                          child: Column(children: [
                            Container(width: double.infinity,height: 146.h,decoration: BoxDecoration(
                              image: DecorationImage(image: CachedNetworkImageProvider('${item['thumb_image']}'),fit: BoxFit.fill),
                              borderRadius: BorderRadius.circular(4.sp)
                            ),),

                            Container(
                              height: 8.h,
                            ),

                            Container(
                              alignment: Alignment.topLeft,
                              child: Text('${item['display_name']}',style: TextStyle(
                                fontSize: 13.sp,
                                fontWeight: FontWeight.bold
                              ),maxLines: 1,overflow: TextOverflow.ellipsis,),
                            ),
                            Container(
                              height: 6.h,
                            ),
                            Container(
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Container(
                                    decoration: BoxDecoration(
                                      color: Color(0xffEBE1E1),
                                      borderRadius: BorderRadius.circular(3.sp)
                                    ),
                                    padding: EdgeInsets.only(top: 3.h,bottom: 3.h,left: 4.w,right: 4.w),
                                    child: Text('都市',style: TextStyle(
                                      color: Color(0xff666666),
                                      fontSize:10.sp
                                    ),),
                                  ),
                                  Expanded(child: Container()),
                                  Image.asset('images/lists_bofang.png',width: 6.w,height: 8.h,),
                                  Container(width: 4.w,),
                                  Text('93.66万',style: TextStyle(
                                    color: Color(0xff999999),
                                    fontSize: 10.sp
                                  ),)
                                ],
                              ),
                            )
                          ],),
                      )).toList(),
                    ),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
